<script setup>
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import api from '@/api'
import { Message } from '@arco-design/web-vue'

const $route = useRoute()
const $router = useRouter()

const custom_name = ref('') // 客户名称
const custom_status = ref('') // 客户状态 0意向1:首次使用2:过期3:续费客户
const pageVal = ref(1)
const pageSize = ref(10)
const listTotal = ref(0)
const listData = ref()
const formVisible = ref(false)
const formData = ref({
  custom_name: '',
  head_name: '',
  mobile: '',
})

const getListData = async (page) => {
  try {
    const res = await api.get('custom/customList', {
      params: {
        custom_name: custom_name.value,
        custom_status: custom_status.value,
        page,
        pageSize: pageSize.value,
      },
    })
    console.log('res', res)
    listData.value = res.data.items
    listTotal.value = res.data.pageInfo.total
    pageVal.value = page
  } catch (error) {
    console.error(error)
  }
}

const openUrl = async (url) => {
  window.open(url)
}

const jumpTo = async (url) => {
  $router.push(url)
}

const formSubmit = async () => {
  console.log('formData', formData.value)
  if (!formData.value.custom_name) {
    Message.error('客户名称不可为空')
    return false
  }
  if (!formData.value.head_name) {
    Message.error('负责人不可为空')
    return false
  }
  if (!formData.value.mobile) {
    Message.error('电话不可为空')
    return false
  }
  try {
    const res = await api.post('custom/createCustom', formData.value)
    Message.success(res.message)
    resetForm()
    getListData()
  } catch (error) {
    console.error('error', error)
    return false
  }
}

const resetForm = async () => {
  formData.value = {
    custom_name: '',
    head_name: '',
    mobile: '',
  }
}

const deleteItem = async (id) => {
  try {
    const res = await api.get('custom/delCustom/' + id)
    Message.success(res.message)
    getListData(1)
  } catch (error) {
    console.error('error', error)
    return false
  }
}

getListData(1)
</script>

<template>
  <div class="page">
    <div class="header">
      <a-space>
        <a-select v-model="custom_status"
                  :style="{width:'240px'}"
                  placeholder="请选择客户状态">
          <a-option value="">全部客户</a-option>
          <a-option value="0">意向客户</a-option>
          <a-option value="1">首次使用客户</a-option>
          <a-option value="2">过期客户</a-option>
          <a-option value="3">续费客户</a-option>
        </a-select>

        <a-input :style="{ width: '240px' }"
                 v-model="custom_name"
                 placeholder="按客户名称查询"
                 allow-clear />

        <a-button @click="getListData(1)"
                  type="primary">查询</a-button>
      </a-space>
      <a-button @click="formVisible = true"
                type="primary">新增客户</a-button>
    </div>

    <a-table :data="listData"
             @page-change="getListData"
             :pagination="{
              showTotal: true,
              size: 'small',
              total: listTotal,
              pageSize: pageSize,
              current: pageVal,
            }">
      <template #columns>
        <a-table-column title="序号"
                        :width="60">
          <template #cell="{ rowIndex }"> {{ rowIndex + 1 }} </template>
        </a-table-column>
        <a-table-column title="客户名称"
                        data-index="custom_name"></a-table-column>
        <a-table-column title="客户类型">
          <template #cell="{ record }">
            <div v-if="record.custom_status==0">意向客户</div>
            <div v-if="record.custom_status==1 || record.custom_status==3">期内客户</div>
            <div v-if="record.custom_status==2">过期客户</div>
          </template>
        </a-table-column>
        <a-table-column title="添加人员"
                        data-index="adminuser"></a-table-column>
        <a-table-column title="增加日期"
                        data-index="created_at"></a-table-column>
        <a-table-column title="操作"
                        align="right"
                        :width="300">
          <template #cell="{ record }">
            <a-space>
              <a-popconfirm @ok="deleteItem(record.id)"
                            content="确认删除该数据吗?"
                            type="warning">
                <a-button :disabled="record.custom_status!=0"
                          type="primary"
                          status="danger"
                          size="mini">删除</a-button>
                <!-- 仅针对意向客户可以删除 -->
              </a-popconfirm>
              <a-button @click="jumpTo('/custom/details?id=' + record.id)"
                        type="primary"
                        size="mini">查看详情</a-button>
              <a-button @click="openUrl(record.admin_url)"
                        type="primary"
                        size="mini">进入管理后台</a-button>
            </a-space>
          </template>
        </a-table-column>
      </template>
    </a-table>

    <a-modal title="新增客户"
             width="600px"
             :on-before-ok="formSubmit"
             v-model:visible="formVisible">
      <a-form :model="formData">
        <a-form-item label="客户名称">
          <a-input v-model="formData.custom_name"
                   :style="{width:'400px'}"
                   placeholder="请输入客户名称"
                   allow-clear></a-input>
        </a-form-item>
        <a-form-item label="负责人">
          <a-input v-model="formData.head_name"
                   :style="{width:'400px'}"
                   placeholder="请输入负责人"
                   allow-clear></a-input>
        </a-form-item>
        <a-form-item label="电话">
          <a-input v-model="formData.mobile"
                   :style="{width:'400px'}"
                   placeholder="请输入电话"
                   allow-clear></a-input>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<style scoped>
.page {
  height: 100%;
}

.header {
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>